<div class="ngm-theme-dark dark w-16 py-2 flex flex-col items-center h-full overflow-auto bg-bluegray-800 text-neutral-100">
  @if (expandLess() || !collapsible()) {
    <div class="w-full px-2 flex-1 flex flex-col items-center overflow-hidden hover:overflow-y-auto" >
        <ng-content></ng-content>

      @if (saving()) {
        <div class="h-[40px] flex flex-col justify-center items-center">
            <mat-spinner color="accent" [diameter]="22" [strokeWidth]="2" />
        </div>
      } @else {
        <button mat-icon-button [color]="(isDirty$ | async)?'accent':''"
            [matTooltip]="'Story.Toolbar.SAVE.SAVE' | translate: {Default: 'Save'}"
            matTooltipPosition="after"
            [disabled]="disableSave()"
            (click)="storyService.saveStory()">
          @if (isDirty$ | async) {
            <span class="absolute top-2 left-2 w-2 h-2 bg-yellow-500 rounded-full"></span>
          }
            <mat-icon fontSet="material-icons-outlined">save</mat-icon>
        </button>
      }

        <button mat-icon-button [color]="showDetails()==='preferences'?'accent':''"
            [matTooltip]="'Story.Toolbar.PREFERENCES.TITLE' | translate: {Default: 'Preferences'}"
            matTooltipPosition="after"
            (click)="togglePreferences()"
        >
            <mat-icon fontSet="material-icons-outlined">settings_applications</mat-icon>
        </button>

        <button mat-icon-button [color]="showDetails()==='storyDesigner'?'accent':''"
            [matTooltip]=" 'Story.Toolbar.GlobalStyles' | translate: {Default: 'Global Styles'} "
            matTooltipPosition="after"
            (click)="toggleStoryDesigner()">
            <mat-icon fontSet="material-icons-round">format_color_fill</mat-icon>
        </button>

        <button mat-icon-button [color]="showDetails()==='devices'?'accent':''"
            [matTooltip]=" 'Story.Toolbar.Devices' | translate: {Default: 'Devices'} "
            matTooltipPosition="after"
            (click)="toggleDevices()">
            <mat-icon fontSet="material-icons-round">devices</mat-icon>
        </button>

        <button mat-icon-button [matTooltip]="editable() ? ('Story.Toolbar.Preview' | translate: {Default: 'Preview'}) : ('Story.Toolbar.Editable' | translate: {Default: 'Editable'})"
            matTooltipPosition="after"
            (click)="toggleEditable(!editable())">
          @if (editable()) {
            <mat-icon fontSet="material-icons-round">edit_off</mat-icon>
          } @else {
            <mat-icon fontSet="material-icons-round">edit</mat-icon>
          }
        </button>

        <button mat-icon-button [matTooltip]="_fullscreen ? ('Story.Toolbar.ExitFullscreen' | translate: {Default: 'Exit Fullscreen'}) : 'Story.Toolbar.Fullscreen' | translate: {Default: 'Fullscreen'}"
            matTooltipPosition="after"
            (click)="_fullscreen=!_fullscreen;fullscreen.emit(_fullscreen)">
          @if (_fullscreen) {
            <mat-icon fontSet="material-icons-round">fullscreen_exit</mat-icon>
          } @else {
            <mat-icon fontSet="material-icons-round">fullscreen</mat-icon>
          }
        </button>

        <div class="py-2 text-center">
            {{ 'Story.Toolbar.Widgets' | translate: {Default: "Widget"} }}
        </div>

        <button mat-icon-button [color]="(creatingWidget$ | async) === ComponentType.AnalyticalCard?'accent':''"
            [matTooltip]="'Story.Toolbar.INSERT.ChartCard' | translate: {Default: 'Chart'}"
            matTooltipPosition="after"
            [class.active]="(creatingWidget$ | async) === ComponentType.AnalyticalCard"
            draggable="true"
            (dragstart)="dragStartHandler($event, {
                component: ComponentType.AnalyticalCard
            })"
            (click)="createWidget({
                component: ComponentType.AnalyticalCard
            })">
            <mat-icon fontSet="material-icons-outlined">addchart</mat-icon>
        </button>
        <button mat-icon-button [color]="(creatingWidget$ | async) === ComponentType.AnalyticalGrid?'accent':''"
            [matTooltip]="'Story.Toolbar.INSERT.Table' | translate: {Default: 'Table'}"
            matTooltipPosition="after"
            [class.active]="(creatingWidget$ | async) === ComponentType.AnalyticalGrid"
            draggable="true"
            (dragstart)="dragStartHandler($event, { component: ComponentType.AnalyticalGrid })"
            (click)="createWidget({
                component: ComponentType.AnalyticalGrid
            })">
            <mat-icon fontSet="material-icons-outlined">pivot_table_chart</mat-icon>
        </button>
        <button mat-icon-button [color]="(creatingWidget$ | async) === ComponentType.InputControl?'accent':''"
            [matTooltip]="'Story.Toolbar.INSERT.InputControl' | translate: {Default: 'Input Control'}"
            matTooltipPosition="after"
            [class.active]="(creatingWidget$ | async) === ComponentType.InputControl"
            draggable="true"
            (dragstart)="dragStartHandler($event, {component: ComponentType.InputControl})"
            (click)="createWidget({
                component: ComponentType.InputControl
            })" >
            <mat-icon fontSet="material-icons-outlined">toggle_on</mat-icon>
        </button>
        <button mat-icon-button [color]="(creatingWidget$ | async) === ComponentType.KpiCard?'accent':''"
            [matTooltip]="'Story.Toolbar.INSERT.KPI' | translate: {Default: 'KPI'}"
            matTooltipPosition="after"
            [class.active]="(creatingWidget$ | async) === ComponentType.KpiCard"
            draggable="true"
            (dragstart)="dragStartHandler($event, {component: ComponentType.KpiCard})"
            (click)="createWidget({
                component: ComponentType.KpiCard
            })">
            <mat-icon fontSet="material-icons-outlined">percent</mat-icon>
        </button>
        <button mat-icon-button [color]="showDetails()==='widgets'?'accent':''"
            matTooltipPosition="after"
            [matTooltip]="showDetails()==='widgets' ?
                ('Story.Toolbar.Less' | translate: {Default: 'Less'}) :
                ('Story.Toolbar.More' | translate: {Default: 'More'})"
            (click)="toggleWidgets()">
            <mat-icon *ngIf="showDetails()!=='widgets'&&!onRight||showDetails()==='widgets'&&onRight">keyboard_arrow_right</mat-icon>
            <mat-icon *ngIf="showDetails()==='widgets'&&!onRight||showDetails()!=='widgets'&&onRight">keyboard_arrow_left</mat-icon>
        </button>

        <button mat-icon-button displayDensity="cosy" class="ngm-copilot-command-button"
            [matTooltip]=" 'Copilot.GenerateWithAI' | translate: {Default: 'Generate with AI'} "
            matTooltipPosition="after"
            (click)="aiChatStory()"
            >
            <mat-icon fontSet="material-icons-outlined">auto_fix_high</mat-icon>
        </button>

        <div class="flex-1">

        </div>
    </div>
  }

  @if (collapsible()) {
    <button mat-icon-button (click)="toggleExpand()">
      @if (expandLess()) {
        <mat-icon fontSet="material-icons-round">expand_less</mat-icon>
      } @else {
        <mat-icon fontSet="material-icons-round">expand_more</mat-icon>
      }
    </button>
  }
</div>

<div *ngIf="showDetails() === 'preferences'" class="ngm-theme-dark dark w-16 h-full flex flex-col border-solid border-0 border-gray-500 bg-bluegray-800 text-neutral-100"
    [ngClass]="onRight?'border-r':'border-l'"
>
    <div class="flex-1 flex flex-col p-2 overflow-y-auto overflow-x-hidden">
        <button mat-icon-button [matTooltip]="'Story.Toolbar.NewPage' | translate: {Default: 'New Page'}"
            matTooltipPosition="after"
            (click)="showDetails.set('newPages')"
            >
            <mat-icon class="ngm-story--tab-icon">add</mat-icon>
        </button>

        <button mat-icon-button [matTooltip]="'Story.Toolbar.PREFERENCES.DETAILS' | translate: {Default: 'Story Details'}"
            matTooltipPosition="after"
            (click)="openStoryDetails()">
            <mat-icon fontSet="material-icons-outlined">settings</mat-icon>
        </button>
        <!-- <button cdkMenuItem (click)="openPreferences()">
            <mat-icon fontSet="material-icons-outlined">tune</mat-icon>
            {{ 'Story.Toolbar.PREFERENCES.PREFERENCES' | translate: {Default: "Preferences"} }}
        </button> -->
        <button mat-icon-button [matTooltip]="'Story.Toolbar.PREFERENCES.ADVANCED_STYLE' | translate: {Default: 'Advanced Style'}"
            matTooltipPosition="after"
            (click)="openAdvancedStyle()">
            <mat-icon fontSet="material-icons-outlined">css</mat-icon>
        </button>
        <button mat-icon-button [matTooltip]="'Story.Toolbar.PREFERENCES.Calculations' | translate: {Default: 'Calculations'}"
            matTooltipPosition="after"
            (click)="openCalculations()">
            <mat-icon fontSet="material-icons-outlined">functions</mat-icon>
        </button>
        <button mat-icon-button [matTooltip]="'Story.Toolbar.PREFERENCES.ThemeBuilder' | translate: {Default: 'Theme Builder'}"
            matTooltipPosition="after"
            (click)="openThemeBuilder()">
            <mat-icon fontSet="material-icons-outlined">palette</mat-icon>
        </button>
        <button mat-icon-button [matTooltip]="'Story.Toolbar.PREFERENCES.Templates' | translate: {Default: 'Templates'}"
            matTooltipPosition="after"
            (click)="toolbarService.openTemplates()">
            <mat-icon fontSet="material-icons-outlined">category</mat-icon>
        </button>

        <button mat-icon-button [matTooltip]=" 'PAC.Project.Files' | translate: { Default: 'Files' } "
            matTooltipPosition="after"
            (click)="openMaterials()">
            <mat-icon fontSet="material-icons-outlined">attach_file</mat-icon>
        </button>

        <!-- <button cdkMenuItem (click)="openQuerySettings()">
            <mat-icon fontSet="material-icons-outlined">query_stats</mat-icon>
            {{ 'Story.Toolbar.PREFERENCES.QUERY_SETTINGS' | translate: {Default: "Query Settings"} }}
        </button>
        <button cdkMenuItem>
            <mat-icon fontSet="material-icons-outlined">lightbulb</mat-icon>
            {{ 'Story.Toolbar.PREFERENCES.SMART_INSIGHTS' | translate: {Default: "Smart Insights"} }}
        </button>
        <button cdkMenuItem (click)="openSubscription()">
            <mat-icon fontSet="material-icons-outlined">subscriptions</mat-icon>
            {{ 'Story.Toolbar.PREFERENCES.SUBSCRIPTION' | translate: {Default: "Subscription"} }}
        </button> -->

        <button mat-icon-button [cdkMenuTriggerFor]="saveMenu" [cdkMenuPosition]="[{
                originX: 'end',
                originY: 'center',
                overlayX: 'start',
                overlayY: 'center'
            }]"
            [matTooltip]="'Story.Toolbar.Edit.Title' | translate: {Default: 'Edit'}"
            matTooltipPosition="after">
            <mat-icon fontSet="material-icons-outlined">edit</mat-icon>
        </button>

        <!-- <button mat-button cdkMenuItem [cdkMenuTriggerFor]="copyMenu">
            <mat-icon fontSet="material-icons-outlined">content_copy</mat-icon>
            {{ 'Story.Toolbar.COPY.COPY' | translate: {Default: "Copy"} }}
        </button> -->

        <button mat-icon-button [matTooltip]="'Story.Toolbar.SHARE.SHARE' | translate: {Default: 'Share'}"
            matTooltipPosition="after"
            (click)="openShare()">
            <mat-icon fontSet="material-icons-outlined">share</mat-icon>
        </button>

        <button mat-icon-button [matTooltip]="'Story.Toolbar.SAVE.EXPORT' | translate: {Default: 'Export'}"
            matTooltipPosition="after"
            [disabled]="exporting"
            (click)="export()">
            <mat-icon fontSet="material-icons-outlined">file_download</mat-icon>
        </button>

        <button mat-icon-button [color]="isPanMode() ? 'accent' : ''"
            [matTooltip]="'Story.Toolbar.PanMode' | translate: {Default: 'Pan mode (Alt)'}"
            matTooltipPosition="after"
            (click)="togglePanTool()">
            <mat-icon fontSet="material-icons-outlined">pan_tool</mat-icon>
        </button>

        <button mat-icon-button
            [matTooltip]="'Story.Toolbar.ZoomIn' | translate: {Default: 'Zoom In (Alt +)'}"
            matTooltipPosition="after"
            (click)="zoomIn()">
            <mat-icon fontSet="material-icons-outlined">zoom_in</mat-icon>
        </button>
        <button mat-icon-button [cdkMenuTriggerFor]="scaleMenu" [cdkMenuPosition]="[{
                originX: 'end',
                originY: 'center',
                overlayX: 'start',
                overlayY: 'center'
            }]"
            [matTooltip]="scale() ?? ('Story.Toolbar.Scale' | translate: {Default: 'Scale'})"
            matTooltipPosition="after"
        >
            <span class="text-xs">{{ scale() }}%</span>
        </button>
        <button mat-icon-button
            [matTooltip]="'Story.Toolbar.ZoomOut' | translate: {Default: 'Zoom Out (Alt -)'}"
            matTooltipPosition="after"
            (click)="zoomOut()">
            <mat-icon fontSet="material-icons-outlined">zoom_out</mat-icon>
        </button>
    </div>
</div>

<div *ngIf="showDetails() === 'newPages'" @inOut class="pac-story-bar__detail-card relative w-96 h-full flex flex-col p-2" >

    <button mat-icon-button style="position: absolute;" class="absolute right-1 top-1" (click)="showDetails.set(null)">
        <mat-icon>close</mat-icon>
    </button>

    <div class="text-base text-center my-4">
        {{ 'Story.Toolbar.NewPage' | translate: {Default: "New Page"} }}
    </div>

    <div class="grid grid-cols-3 gap-2">
        <button *ngFor="let page of pages" class="h-20 m-2 flex justify-center items-center rounded-lg overflow-hidden
            ring-offset-2 ring-2 ring-transparent ring-offset-transparent
            hover:ring-violet-300 focus:ring-violet-500 hover:ring-offset-white dark:hover:ring-offset-black"
            (click)="createStoryPage(page.value)"
            [matTooltip]="'Story.Toolbar.' + page.label | translate: {Default: page.label}"
            matTooltipPosition="above"
        >
            {{ 'Story.Toolbar.' + page.label | translate: {Default: page.label} }}
        </button>
    </div>
</div>

<div *ngIf="showDetails() === 'widgets'" @inOut class="pac-story-bar__detail-card w-80 h-full flex flex-col p-2">
    <div class="text-base text-center my-4">
        {{ 'Story.Toolbar.Charts' | translate: {Default: "Charts"} }}
    </div>

    <ng-container *ngFor="let group of charts" >
        <div class="text-sm p-2">
            {{'FORMLY.CHART.' + group.label | translate: {Default: group.label} }}
        </div>
        <div class="grid grid-cols-3 gap-2">
            <button *ngFor="let chart of group.charts" class="h-16 m-2 flex justify-center items-center rounded-lg overflow-hidden
                ring-offset-2 ring-2 ring-transparent ring-offset-transparent hover:ring-violet-300 focus:ring-violet-500
                hover:ring-offset-white dark:hover:ring-offset-black
                bg-white"
                [matTooltip]="'FORMLY.CHART.' + chart.label | translate: {Default: chart.label}"
                matTooltipPosition="above"
                draggable="true"
                (dragstart)="dragStartHandler($event, {
                    component: ComponentType.AnalyticalCard,
                    dataSettings: {
                        chartAnnotation: chart.value
                    }
                })"
                (click)="createWidget({
                    component: ComponentType.AnalyticalCard,
                    dataSettings: {
                        chartAnnotation: chart.value
                    }
                })"
            >
                <img [src]="'/assets/icons/charts/' + chart.icon" class="object-contain max-h-full" alt="{{chart.label}}"
                    [ngStyle]="{
                        transform: chart.rotate ? 'rotate(90deg)' : 'none',
                        width: chart.width ? chart.width : '100%'
                    }"
                >
            </button>
        </div>
    </ng-container>
    
    <mat-divider></mat-divider>
    <div class="text-base text-center my-2">
        {{ 'Story.Toolbar.Widgets' | translate: {Default: "Widgets"} }}
    </div>

    <div class="grid grid-cols-3 gap-2">
        <button *ngFor="let widget of widgets" class="h-16 m-2 flex justify-center items-center rounded-lg overflow-hidden
            ring-offset-2 ring-2 ring-transparent ring-offset-transparent hover:ring-violet-300 focus:ring-violet-500
            hover:ring-offset-white dark:hover:ring-offset-black"
            [matTooltip]="'Story.Toolbar.INSERT.' + widget.code | translate: {Default: widget.label}"
            matTooltipPosition="above"
            draggable="true"
            (dragstart)="dragStartHandler($event, widget.value)"
            (click)="createWidget(widget.value)"
        >
            <mat-icon fontSet="material-icons-outlined">
                {{widget.icon}}
            </mat-icon>
        </button>

        <!-- <button (click)="createWidget(ComponentType.AnalyticalGeography)">
            <mat-icon fontSet="material-icons-outlined">map</mat-icon>
            {{ 'Story.Toolbar.INSERT.Geo_Map' | translate: {Default: "Geo Map"} }}
        </button> -->

        <!-- <button>Shape</button>
        <mat-divider></mat-divider>
        <button>Symbol</button> -->

        <!-- <button (click)="createWidget(ComponentType.Table)"
            [disabled]="false"
        >
            <mat-icon fontSet="material-icons-outlined">pivot_table_chart</mat-icon>
            {{ 'Story.Toolbar.INSERT.PivotTable' | translate: {Default: "Pivot Table"} }}
            <span class="pac-pro-tag">pro</span>
        </button> -->
    </div>
</div>

@if (showDetails() === 'storyDesigner') {
  <pac-story-designer @inOut class="pac-story-bar__detail-card w-96 h-full" />
}

<div *ngIf="showDetails() === 'devices'" @inOut class="pac-story-bar__detail-card w-80 h-full flex flex-col p-2">

    <div class="text-base text-center my-2">
        {{ 'Story.Toolbar.Devices' | translate: {Default: 'Devices'} }}
    </div>
    <div class="grid grid-cols-2 gap-2">
      @for (device of EmulatedDevices; track $index) {
        <button class="h-24 m-2 flex flex-col justify-center items-center rounded-lg overflow-hidden
            ring-offset-2 ring-2 ring-transparent ring-offset-transparent
            hover:ring-violet-300 focus:ring-violet-500 hover:ring-offset-white dark:hover:ring-offset-black"
            [class.ring-violet-500]="device.name === emulatedDevice?.name"
            (click)="toggleMobile(device.value)"
        >
            <span>{{ ('Story.Toolbar.EmulatedDevice_' + device.name) | translate: {Default: device.name} }}</span>
            <span *ngIf="device.value">{{device.value.width ?? emulatedDevice?.width}} x {{device.value.height ?? emulatedDevice?.height}}</span>
        </button>
      }
    </div>

    <div *ngIf="emulatedDevice" class="flex justify-center items-center gap-4">
        <ngm-input [label]=" 'Story.Toolbar.Width' | translate: {Default: 'Width'} "
            [(ngModel)]="emulatedDevice.width"
            (ngModelChange)="onEmulatedDeviceChange()"
        ></ngm-input>
        <ngm-input [label]=" 'Story.Toolbar.Height' | translate: {Default: 'Height'} "
            [(ngModel)]="emulatedDevice.height"
            (ngModelChange)="onEmulatedDeviceChange()"
        >
        </ngm-input>
    </div>

    <mat-divider></mat-divider>
    <div class="text-base text-center my-2">{{ 'Story.Toolbar.Fit' | translate: {Default: 'Fit'} }}</div>
    <div class="grid grid-cols-3 gap-2">
        <button *ngFor="let zoom of DeviceZooms" class="h-16 m-2 flex flex-col justify-center items-center rounded-lg overflow-hidden
            ring-offset-2 ring-2 ring-transparent ring-offset-transparent
            hover:ring-violet-300 focus:ring-violet-500 hover:ring-offset-white dark:hover:ring-offset-black"
            [class.ring-violet-500]="zoom.name === deviceZoom?.name"
            (click)="setDeviceZoom(zoom)">
            {{zoom.name}}
        </button>
    </div>
    
    <mat-divider></mat-divider>
    <div class="text-base text-center my-2">
        {{ 'Story.Toolbar.Orientation' | translate: {Default: 'Orientation'} }}
    </div>

    <div class="w-full flex justify-center items-center">
        <mat-button-toggle-group ngmAppearance="outline" displayDensity="compact" color="accent"
            [ngModel]="orientation"
            (ngModelChange)="toggleOrientation($event)"
        >
            <mat-button-toggle [value]="DeviceOrientation.landscape">
                <mat-icon fontSet="material-icons-round" displayDensity="compact">stay_primary_landscape</mat-icon>
            </mat-button-toggle>
            <mat-button-toggle [value]="DeviceOrientation.portrait">
                <mat-icon fontSet="material-icons-round" displayDensity="compact">stay_primary_portrait</mat-icon>
            </mat-button-toggle>
        </mat-button-toggle-group>
    </div>

    <ng-container *ngIf="emulatedDevice?.isFold">
        <mat-divider></mat-divider>
        <div class="text-base text-center my-2">
            {{ 'Story.Toolbar.DeviceFold' | translate: {Default: 'Device Fold'} }}
        </div>
        <div class="w-full flex justify-center items-center">
            <button mat-button  [color]="deviceFold?'accent':''"
                [matTooltip]=""
                matTooltipPosition="after"
                (click)="toggleDeviceFold()">
                <mat-icon fontSet="material-icons-outlined">flip</mat-icon>
            </button>
        </div>
    </ng-container>
</div>

<ng-template #fileMenu>
    <div cdkMenu displayDensity="cosy">
        <button cdkMenuItem >
            {{ 'Story.Toolbar.PREFERENCES.PREFERENCES' | translate: {Default: "Preferences"} }}
        </button>
        <button cdkMenuItem [cdkMenuTriggerFor]="saveMenu">
            <span matBadge="1" matBadgeOverlap="false" matBadgeColor="accent"
                [matBadgeHidden]="isNotDirty$ | async" >
                {{ 'Story.Toolbar.SAVE.SAVE' | translate: {Default: "Save"} }}
            </span>
        </button>
        <button cdkMenuItem [cdkMenuTriggerFor]="copyMenu">
            {{ 'Story.Toolbar.COPY.COPY' | translate: {Default: "Copy"} }}
        </button>
        <button cdkMenuItem>
            <mat-icon>share</mat-icon>
            {{ 'Story.Toolbar.SHARE.SHARE' | translate: {Default: "Share"} }}
        </button>
    </div>
</ng-template>

<ng-template #saveMenu>
    <div cdkMenu displayDensity="cosy">
        <button cdkMenuItem [disabled]="isNotDirty$ | async"
            [class.mat-accent]="isDirty$ | async"
            (click)="storyService.saveStory()">
            {{ 'Story.Toolbar.SAVE.SAVE' | translate: {Default: "Save"} }}
        </button>

        <!-- <button cdkMenuItem (click)="openSaveAs()">
            {{ 'Story.Toolbar.SAVE.SAVE_AS' | translate: {Default: "Save As"} }}...
        </button>
        <button cdkMenuItem>
            {{ 'Story.Toolbar.SAVE.SAVE_AS_TEMPLATE' | translate: {Default: "Save As Template"} }}...
        </button> -->

        <mat-divider></mat-divider>

        <button cdkMenuItem [cdkMenuItemDisabled]="isWidgetSelected()"
            [class.ngm-cdk-menu-item__disabled]="isWidgetSelected()"
            (click)="copyWidget()">
            {{ 'Story.Toolbar.COPY.COPY' | translate: {Default: "Copy"} }}
        </button>
        <button cdkMenuItem [cdkMenuItemDisabled]="isWidgetSelected()"
            [class.ngm-cdk-menu-item__disabled]="isWidgetSelected()"
            [cdkMenuTriggerFor]="copyToMenu">
            {{ 'Story.Toolbar.COPY.COPY_TO' | translate: {Default: "Copy to"} }}...
        </button>
        <button cdkMenuItem [cdkMenuItemDisabled]="isWidgetSelected()"
            [class.ngm-cdk-menu-item__disabled]="isWidgetSelected()"
            (click)="duplicateWidget()">
            {{ 'Story.Toolbar.COPY.DUPLICATE' | translate: {Default: "Duplicate"} }}
        </button>
        <mat-divider></mat-divider>
        <button cdkMenuItem
            [cdkMenuItemDisabled]="!isCopyWidgetSelected$()"
            [class.ngm-cdk-menu-item__disabled]="!isCopyWidgetSelected$()"
            (click)="isCopyWidgetSelected$() ? pasteWidget() : ''">
            {{ 'Story.Toolbar.COPY.PASTE' | translate: {Default: "Paste"} }}
        </button>
        
        <mat-divider></mat-divider>

        <button cdkMenuItem (click)="saveAsTemplate()">
            {{ 'Story.Toolbar.SaveAsTemplate' | translate: {Default: "Save As Template"} }}
        </button>
    </div>
</ng-template>

<ng-template #copyMenu>
    <div cdkMenu displayDensity="cosy">
        <button cdkMenuItem [cdkMenuItemDisabled]="isWidgetSelected()"
            [class.ngm-cdk-menu-item__disabled]="isWidgetSelected()"
            (click)="copyWidget()">
            {{ 'Story.Toolbar.COPY.COPY' | translate: {Default: "Copy"} }}
        </button>
        <button cdkMenuItem [cdkMenuItemDisabled]="isWidgetSelected()"
            [class.ngm-cdk-menu-item__disabled]="isWidgetSelected()"
            [cdkMenuTriggerFor]="copyToMenu">
            {{ 'Story.Toolbar.COPY.COPY_TO' | translate: {Default: "Copy to"} }}...
        </button>
        <button cdkMenuItem [cdkMenuItemDisabled]="isWidgetSelected()"
            [class.ngm-cdk-menu-item__disabled]="isWidgetSelected()"
            (click)="duplicateWidget()">
            {{ 'Story.Toolbar.COPY.DUPLICATE' | translate: {Default: "Duplicate"} }}
        </button>
        <mat-divider></mat-divider>
        <button cdkMenuItem
            [cdkMenuItemDisabled]="!isCopyWidgetSelected$()"
            [class.ngm-cdk-menu-item__disabled]="!isCopyWidgetSelected$()"
            (click)="isCopyWidgetSelected$() ? pasteWidget() : ''">
            {{ 'Story.Toolbar.COPY.PASTE' | translate: {Default: "Paste"} }}
        </button>
    </div>
</ng-template>

<mat-menu #share2Menu="matMenu" class="ngm-density__compact">
    <button mat-menu-item>飞书</button>
    <button mat-menu-item>钉钉</button>
    <button mat-menu-item>微信</button>
</mat-menu>

<ng-template #copyToMenu>
    <div cdkMenu displayDensity="cosy">
        <button cdkMenuItem (click)="onCopyToNew(STORY_POINT_TYPE.Canvas)">
            {{ 'Story.Toolbar.New_Canvas_Page' | translate: {Default: "New Canvas Page"} }}
        </button>
        <button cdkMenuItem (click)="onCopyToNew(STORY_POINT_TYPE.Responsive)">
            {{ 'Story.Toolbar.New_Responsive_Page' | translate: {Default: "New Responsive Page"} }}
        </button>
    
        <mat-divider></mat-divider>
      @for (point of pointList(); track point.key) {
        <button cdkMenuItem
            (click)="onCopyTo(point.key)">{{ point.name }}</button>
      }
    </div>
</ng-template>

<!-- <mat-menu #pageMenu="matMenu" class="ngm-density__compact">
    <button mat-menu-item (click)="storyService.createStoryPoint(STORY_POINT_TYPE.Canvas)">
        {{ 'Story.Toolbar.New_Canvas_Page' | translate: {Default: "New Canvas Page"} }}
    </button>
    <button mat-menu-item (click)="storyService.createStoryPoint(STORY_POINT_TYPE.Responsive)">
        {{ 'Story.Toolbar.New_Responsive_Page' | translate: {Default: "New Responsive Page"} }}
    </button>
</mat-menu> -->

<ng-template #devicesMenu>
    <div cdkMenu displayDensity="cosy">
        <button cdkMenuItem *ngFor="let device of EmulatedDevices"
            (click)="setEmulatedDevice(device)">
            {{device.name}}
        </button>
    </div>
</ng-template>

<ng-template #zoomsMenu>
    <div cdkMenu displayDensity="cosy">
        <button cdkMenuItem *ngFor="let zoom of DeviceZooms"
            (click)="setDeviceZoom(zoom)">
            {{zoom.name}}
        </button>
    </div>
</ng-template>
<ng-template #scaleMenu>
    <div cdkMenu displayDensity="cosy">
        <button cdkMenuItem (click)="resetScalePan.emit()">
            <mat-icon>center_focus_strong</mat-icon>
            <span class="flex-1">
                {{ 'Story.Toolbar.Scale_Unset' | translate: {Default: 'Unset'} }}
            </span>

            <span class="text-sm font-bold ml-4">
                Alt + Esc
            </span>
        </button>
      @for (item of StoryScales; track item.value) {
        <button cdkMenuItem class="pac-story-bar__scale-item group"
            [class.active]="scale() === item.value"
            (click)="setScale(item.value)">
            <span class="pac-story-bar__scale-point inline-flex items-center justify-center w-2 h-2 ml-2 mr-4 text-xs font-semibold bg-gray-200 rounded-full group-hover:bg-yellow-500">
            </span>
            
            <span>{{item.name}}</span>
        </button>
      }
    </div>
</ng-template>

<ng-template #viewsMenu>
    <div cdkMenu displayDensity="cosy">

        <button cdkMenuItem [cdkMenuTriggerFor]="scaleMenu" [matTooltip]="'Story.Toolbar.Scale' | translate: {Default: 'Scale'}">
            {{scale() ?? ('Story.Toolbar.Scale' | translate: {Default: 'Scale'})}}
        </button>
    
        <ng-container *ngIf="emulatedDevice">
            <button cdkMenuItem [cdkMenuTriggerFor]="devicesMenu" [matTooltip]="'Story.Toolbar.EmulatedDevices' | translate: {Default: 'Emulated Devices'}"
                matTooltipPosition="after">
                {{emulatedDevice?.name ?? 'Responsive'}}
            </button>
            <button cdkMenuItem [cdkMenuTriggerFor]="zoomsMenu" [matTooltip]="'Story.Toolbar.Fit' | translate: {Default: 'Fit'}"
                matTooltipPosition="after">
                {{deviceZoom?.name ?? ('Story.Toolbar.Fit' | translate: {Default: 'Fit'})}}
            </button>
        
            <button cdkMenuItem *ngIf="emulatedDevice?.isFold" [matTooltip]="'Story.Toolbar.DeviceFold' | translate: {Default: 'Device Fold'}"
                matTooltipPosition="after"
                (click)="toggleDeviceFold()">
                <mat-icon fontSet="material-icons-outlined">flip</mat-icon>
            </button>
        </ng-container>
    </div>
</ng-template>
